import React, { Component } from 'react';

import { Form, Input, Button, Checkbox,Card } from 'antd';
import "./css/index.css"

export default class Login extends Component {
    onFinish = async (userInfo) => {
      let result = await this.api.post("login",userInfo)
      console.log(result);
      if(result.meta.status===200){
        sessionStorage.setItem("token",result.data.token)
        sessionStorage.setItem("username",result.data.username)
        this.props.history.replace("/main")
      }
    }
    render(){
    return (
      <div className='login'>
        <Card title="晨锋后台管理系统" className='loginName'>
        <Form
            name="basic"
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 18,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish}
            autoComplete="off"
          >
            <Form.Item
              label="账号"
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入账号!',
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码!',
                },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 10,
                span: 18,
              }}
            >
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}
